<title><span key="signup.title"/></title>
<content tag="heading"><span key="signup.heading"/></content>

<body jwcid="@Body" id="signup">

<span jwcid="@ShowValidationError" delegate="ognl:beans.delegate"/>

<div class="separator"></div>
  
<form jwcid="signupForm">
<ul>
    <li class="info">
        <span key="signup.message"/>
    </li>
    <li>
        <label class="desc" jwcid="@FieldLabel" field="ognl:components.usernameField">Username</label>
        <input jwcid="usernameField" type="text" id="username" class="text large"/>
    </li>
    <li>
        <div>
            <div class="left">
                <label class="desc" jwcid="@FieldLabel" field="ognl:components.passwordField">Password</label>
                <input class="text medium" jwcid="passwordField" type="password" id="password"/>
            </div>
            <div>
                <label class="desc" jwcid="@FieldLabel" field="ognl:components.confirmPasswordField">Confirm Password</label>
                <input class="text medium" jwcid="confirmPasswordField" type="password" id="confirmPassword"/>
            </div>
        </div>
    </li>
    <li>
        <label class="desc" jwcid="@FieldLabel" field="ognl:components.passwordHintField">Password Hint</label>
        <input class="text large" jwcid="passwordHintField" type="text" id="passwordHint"/>
    </li>
    <li>
        <div>
            <div class="left">
                <label class="desc" jwcid="@FieldLabel" field="ognl:components.firstNameField">First Name</label>
                <input class="text medium" jwcid="firstNameField" type="text" id="firstName"/>
            </div>
            <div>
                <label class="desc" jwcid="@FieldLabel" field="ognl:components.lastNameField">Last Name</label>
                <input class="text medium" jwcid="lastNameField" type="text" id="lastName"/>
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="left">
                <label class="desc" jwcid="@FieldLabel" field="ognl:components.emailField">E-Mail</label>
                <input class="text medium" jwcid="emailField" type="text" id="email"/>
            </div>
            <div>
                <label class="desc" jwcid="@Label" for="phoneNumber" key="user.phoneNumber">Phone Number</label>
                <input class="text medium" jwcid="phoneNumberField" type="text" id="phoneNumber"/>
            </div>
        </div>
    </li>
    <li>
        <label class="desc" jwcid="@FieldLabel" field="ognl:components.websiteField">Website</label>
        <input class="text large" jwcid="websiteField" type="text" id="website"/>
    </li>
    <li>
        <label class="desc"><span key="user.address.address"/></label>
        <div class="group">
            <div>
                <input class="text large" jwcid="addressField" type="text" id="address"/>
                <p><label jwcid="@Label" for="address" key="user.address.address">Address</label></p>
            </div>
            <div class="left">
                <input class="text medium" jwcid="cityField" type="text" id="city"/>
                <p><label jwcid="@FieldLabel" field="ognl:components.cityField" prerender="false">City</label></p>
            </div>
            <div>
                <input class="text state" jwcid="stateField" type="text" id="state" size="2"/>
                <p><label jwcid="@FieldLabel" field="ognl:components.stateField" prerender="false">State</label></p>
            </div>
            <div class="left">
                <input class="text zip" jwcid="postalCodeField" type="text" id="zip"/>
                <p><label jwcid="@FieldLabel" field="ognl:components.postalCodeField" prerender="false">Zip</label></p>
            </div>
            <div>
                <select jwcid="countryField" size="1" class="select">
                    <option></option>
                </select>
                <p><span key="user.address.country"/> <label><span class="req">*</span></label></p>
            </div>
        </div>
    </li>
    <li class="buttonBar bottom">
        <input type="submit" class="button" jwcid="@Submit" value="message:button.register" id="register" action="listener:save"/>
        <input type="submit" class="button" jwcid="@Submit" value="message:button.cancel" id="cancel" action="listener:cancel"
            onclick="form.onsubmit = null"/>
    </li>
</ul>
</form>

<script type="text/javascript">
    Form.focusFirstElement($("signupForm"));
    highlightFormElements();
</script>

</body>
